<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-button type="primary" @click="open">添加区域</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="list"  :header-cell-style="getRowClass"
        style="width: 100% "
      >
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          label="区域名称"
          width="180" prop="areaName"
        />
        <el-table-column
          label="车位数（个）" prop="spaceNumber"
        />
        <el-table-column  
          label="面积（㎡）" prop="areaProportion"
          width="120" 
        />
        <el-table-column  
          label="计费规则" prop="ruleId"
          width="120"
        />
        <el-table-column   
          label="备注" prop="remark"
        />
        <el-table-column  
          label="操作"
        >
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              @click="editList(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              @click="delList(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="box">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[4, 6, 8, 10]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
    </el-pagination>
  </div>
    </div>
    <el-dialog
        :title="form.id ? '编辑区域' : '添加区域'"
        :visible="flag"
        @close="close"
      >
        <div style="display: flex; justify-content: center;">
          <el-form ref="form" style="width: 400px;"  :model="form" :rules="rules">
          <el-form-item label="区域名称" prop="areaName">
          <el-input v-model="form.areaName" />
        </el-form-item>
        <el-form-item label="车位数（个）" prop="spaceNumber">
          <el-input v-model="form.spaceNumber" />
        </el-form-item>
        <el-form-item label="面积（㎡）" prop="areaProportion">
          <el-input v-model="form.areaProportion" />
        </el-form-item>
        <el-form-item label="关联计费规则" prop="ruleId">
          <el-select v-model="form.ruleId">
                <el-option
                    v-for="item in formList"
                    :key="item.ruleId"
                    :value="item.ruleId"
                    :label="item.ruleName"
                />
                </el-select>
        </el-form-item> 
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" class="beizhu"/>
        </el-form-item>

       <el-form-item style="display: flex; justify-content: right;">
        <el-button type="info" plain >取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
       </el-form-item>
        </el-form>
        </div>
        
        <!-- <template #footer>
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
        </template> -->
      </el-dialog>
  </div>
</template>

<script>
import { addAreaListAPI, delAreaListAPI, downListAreaListAPI, editAreaListAPI, getAreaListAPI } from '@/api/area'

export default {
  data(){
    return{
      list:[],
      params: {
        page: 1,
        pageSize: 4,
        name:''
      },
      total:0,
      flag:false,
      formList:[
      
      ],
      form:{
        areaName:'',
        spaceNumber:null,
        areaProportion:null,
        ruleId:null,
        remark:''
      },
      rules:{
       areaName: [
        { required: true, message: '请输入楼宇名称', trigger: 'blur' }
      ],
      spaceNumber: [
        { required: true, message: '请输入楼宇层数', trigger: 'blur' }
      ],
      areaProportion: [
        { required: true, message: '请输入楼宇面积', trigger: 'blur' }
      ],
      ruleId: [
        { required: true, message: '请输入楼宇物业费', trigger: 'blur' }
      ],
      remark: [
        { required: true, message: '请输入楼宇物业费', trigger: 'blur' }
      ]
      }
    }
  },
  mounted() {
    this.getList()
    this.downList()
  },
  methods:{
    confirm(){
      this.$refs.form.validate((ok) => {
        if(ok){
         if(this.form.id){
          editAreaListAPI(this.form).then(() =>{
            this.getList()
            this.$message.success("编辑成功！")
            this.flag = false

            this.form = {
              areaName:'',
              spaceNumber:null,
              areaProportion:null,
              ruleId:null,
              remark:''
                  }
          }).catch(()=>{
                    this.$message.error('出错了！')
                  })
             
         } else{
          this.addList()
        } 
        } 
      })
    },
    editList(row){
      this.flag = true
      this.form.areaName = row.areaName
      this.form.spaceNumber = row.spaceNumber
      this.form.areaProportion = row.areaProportion
      this.form.ruleId = row.ruleId
      this.form.remark = row.remark

      this.form.id = row.id
      // this.form.ruleName = row.ruleName
      // this.form.hoverRuleName =row.hoverRuleName
    },
    delList(id){
      this.$confirm('确定要删除吗！').then(() => {
        delAreaListAPI(id).then(() =>{
        this.getList()
        this.$message.success('删除成功！')
      })
      }).catch(() => {
        this.$message.error('取消删除!')
      })
    },
    downList(){
      downListAreaListAPI().then((res) =>{
        // console.log('FUCK!!!');
        this.formList = res.data
      }).catch(() =>{
        this.$message.error('下拉列表出错了！')
      })
      
    },
    addList(){
      addAreaListAPI(this.form).then(() =>{
        this.$message.success('添加成功！')
        this.getList()
        this.form = {
              areaName:'',
              spaceNumber:null,
              areaProportion:null,
              ruleId:null,
              remark:''
                  }
        this.flag = false
      }).catch(() =>{
        this.$message.error('添加失败!')
      })
    },
    open(){
      this.flag=true
    },
    close(){
      this.flag=false
      this.form = {
              areaName:'',
              spaceNumber:null,
              areaProportion:null,
              ruleId:null,
              remark:''
                  }
    },
    getList(){
      // console.log("hh",this.params);
      getAreaListAPI(this.params).then((res) => {
        this.list = res.data.rows
        this.total = res.data.total
        console.log(res);
      })
    },
    handleSizeChange(pageSize){
      this.params.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(page){
      this.params.page = page
      this.getList()
    },
    getRowClass({ rowIndex, columnIndex }) {
        if (rowIndex == 0) {
          return "background:#F5F7FA;";
        }
      }
  }
}
</script>

<style lang="scss" scoped>
.department-container{
  padding:10px;
}

.custom-header {
  background-color: gray;
}
.box{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 20px;
}
.search-container{
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237,237,237,.9);;
  padding-bottom: 20px;
  .search-label{
    width:100px;
  }
  .search-main{
    width: 220px;
    margin-right: 10px;
  }
}
</style>